<template>
  <div>
    <van-tabs v-model="active">
      <van-tab title="全部">
        <div>
          <span class="hao">订单编号：888888888888</span>
          <span class="fu">待支付</span>
        </div>
        <van-card
          price="1399"
          desc="环球远航"
          title="荣耀手表GS3环球远航"
          thumb="https://hshopb.honorfile.com/pimages/product/6973316859416/142_142_16F0FBC7A7A029237D2AAD857608C63AC541393814B9118Bmp.png"
        >
          <template #tags>
            <van-tag plain type="danger">分期免息</van-tag>
          </template>
          <template #footer class="anniu">
            <span ref="num">x1</span>
          </template>
        </van-card>
        <div class="qingdan">共<span class="num">1</span>件商品，待付：￥<span class="qian">1399</span></div>
         <div class="bttn">
            <p class="b1" @click="fun1">取消订单</p>
            <p class="b1">修改订单</p>
            <p class="b1" @click="fun">去支付</p>
        </div>
      </van-tab>
      <van-tab title="待付款">     <div>
          <span class="hao">订单编号：888888888888</span>
          <span class="fu">待支付</span>
        </div>
        <van-card
          price="1399"
          desc="环球远航"
          title="荣耀手表GS3环球远航"
          thumb="https://hshopb.honorfile.com/pimages/product/6973316859416/142_142_16F0FBC7A7A029237D2AAD857608C63AC541393814B9118Bmp.png"
        >
          <template #tags>
            <van-tag plain type="danger">分期免息</van-tag>
          </template>
          <template #footer class="anniu">
            <span ref="num">x1</span>
          </template>
        </van-card>
        <div class="qingdan">共<span class="num">1</span>件商品，待付：￥<span class="qian">1399</span></div>
         <div class="bttn">
            <p class="b1" @click="fun1">取消订单</p>
            <p class="b1">修改订单</p>
            <p class="b1" @click="fun">去支付</p>
        </div>
      </van-tab>
      <van-tab title="待收货">
        <div class="top3">
          <div class="img"></div>
          <div class="top31">您没有商品订单</div>
        </div>
        <div class="tuijian">推荐搭配</div>
        <div class="goods">
          <div class="main" v-for="(item, index) in list" :key="index">
            <div class="img"><img :src="item.src" alt="" /></div>
            <div class="title">{{ item.title }}</div>
            <div class="price">{{ item.price }}</div>
          </div>
        </div>
      </van-tab>
      <van-tab title="已完成">
        <div class="top3">
          <div class="img"></div>
          <div class="top31">您没有商品订单</div>
        </div>
        <div class="tuijian">推荐搭配</div>
        <div class="goods">
          <div class="main" v-for="(item, index) in list" :key="index">
            <div class="img"><img :src="item.src" alt="" /></div>
            <div class="title">{{ item.title }}</div>
            <div class="price">{{ item.price }}</div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
    };
  },
  mounted() {
    this.$http({
      url: "http://localhost:3000/goods",
      method: "get",
    }).then((res) => {
      this.list = res.data;
    });
  },
  methods: {
    fun(){
        this.$router.push("/cashdesk")
    },
    fun1(){
        this.$router.push("/myhome")
    }
  },
};
</script>

<style lang="scss" scoped>
.top3 {
  width: 7.1875rem;
  height: 10.1875rem;
  margin: 0 auto;
}
.img {
  background: url(https://hshop.honorfile.com/nwap/221030101/images/echannelWap/icon/emtpy-order.png)
    no-repeat center;
  background-size: 4.9875rem 4.9875rem;
  width: 5.1875rem;
  height: 5.1875rem;
  margin-top: 3rem;
  margin-left: 1rem;
}
.top31 {
  color: darkgrey;
  margin-top: 0.525rem;
}
.tuijian {
  margin: 1rem;
  font-weight: 700;
  font-size: 1rem;
}
.goods {
  display: flex;
  flex-wrap: wrap;
}
.main {
  width: 10.375rem;
  height: 15.625rem;
  border-radius: 0.625rem;
  background-color: white;
  overflow: hidden;
  margin: 0.6475rem;
}
.img {
  width: 7.75rem;
  height: 7.75rem;
  margin: 1.25rem;
}
img {
  width: 7.75rem;
  height: 7.75rem;
}
.title {
  font-size: 0.875rem;
  margin: 0 auto;
}
.price {
  font-size: 0.875rem;
  font-weight: 700;
  margin-top: 1.5625rem;
  margin-left: 0.3125rem;
}
span {
  font-size: 0.7rem;
}
.hao {
  color: rgb(131, 132, 132);
  margin-left: 1.25rem;
}
.fu {
  color: rgb(47, 112, 218);
  margin-left: 10rem;
}
.num,
.qian {
  font-weight: 700;
  font-size: 16px;
  color: black;
}
.qingdan {
  margin-left: 12rem;
  font-size: 14px;
  color: rgb(106, 109, 109);
}
.bttn {
  display: flex;
  margin-left: 6rem;
  margin-top: 1.5625rem;
}
.b1{
    padding: 3px 10px;
    margin: 5px;
    border: .5px solid grey;
    border-radius: 20px;
}
.b1:last-child{
    color: white;
    background-color: rgb(54, 100, 240);
}
</style>